<template>
  <div class="contents">
    <PanelTitle title="种植分布" />
    <loopScroll class="mt">
      <div class="info" v-for="item in plantTaskList" :key="item.id">
        <div class="pic">
          <img v-if="item.imageUrl" :src="item.imageUrl[0]" class="cover" alt="">
        </div>
        <div class="texts">
          作物名称： 太子参
          <br />
          作物品种： {{ item.medicinalName }}
          <br />
          种植规模： {{ item.acreage ? item.acreage : 0 }}亩
          <br />
          种植时间： {{ item.startTime }}
          <br />
          生长阶段：
          <label v-if="item.taskStatus == 1" color="red">未开始</label>
          <label v-if="item.taskStatus == 2" color="blue">执行中</label>
          <label v-if="item.taskStatus == 3" color="green">已完成</label>
        </div>
      </div>
    </loopScroll>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { useBaseStore } from "@/stores/base";
import { useLandStore } from "@/stores/land";
import loopScroll from "@/components/loopScroll.vue";
const baseStore = useBaseStore()
const landStore = useLandStore()


let plantTaskList = ref([]);
const getData = async () => {
  if(!landStore.land){
    return
  }
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/base/plant/task/list",
    method: "get",
    params: {
      baseId: baseStore.base.id,
      landId: landStore.land.id
    }
  });
  
  plantTaskList.value = res.data;
}
watch(() => landStore.land, () => {
  getData()

})
onMounted(async () => {
  getData()
});
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

  .mt {
    margin-top: vh(-40);
    height: 38vh;
    overflow-y: hidden;
  }
}

.info {
  display: flex;
  align-items: center;
  margin: vh(6) vw(18);

  .pic {
    width: vw(136);
    height: vh(91);
    border: vh(1) solid #22fdd5;
    text-align: center;
  }
.cover{
  max-width: 100%;
  max-height: 100%;
}
  .texts {
    font-weight: bold;
    font-size: vh(9);
    color: #feffff;
    line-height: vh(16);
    margin-left: vw(16);
    text-shadow: 0 0 vh(6) #22fdd5;
  }
}
</style>